.user-profile
  .page
    position relative
    background #120810
    width 100%
    height 100%
    overflow hidden

    .wrapper
    position absolute
      background #120810
      overflow hidden
      box-sizing border-box
      left 0
      top 0
      width 100%
      height 100%
      transform translate3d(0, 0, 0)
      z-index 1

      .main-grids
        margin 0 16px
        transition all .3s ease-in-out

        .inner
          position relative
          display flex
          flex-direction row

      .album-cover-blur
        position absolute
        width 100%
        height 100%
        left 0
        top 0
        background #120810

        &:before
          content ''
          position absolute
          width 100%
          height 200px
          left 0
          top -20px
          z-index 2
          background linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 46%, rgba(0, 0, 0, 1) 64%)
          opacity 0
          visibility hidden
          background-image none
          transition all .3s ease-in-out

        img
          position relative
          top 0
          height 280px
          opacity .42
          filter blur(50px)

      .user-profile-content
        position relative
        height 100%
        opacity 1
        overflow scroll

        .user-profile-containter
          padding-bottom 95px

          .user-profile-avatar
            position relative
            z-index 1
            // margin-top 106px
            margin-top 56px

            img
              display inline-block
              width 137px
              height 133px
              margin-left 18px
              margin-right 18px
              vertical-align top
              border-radius 100%

            .user-info
              display inline-block

              .user-name
                position relative
                top -2px
                display block
                font-size 22px
                font-weight 500
                font-style normal
                letter-spacing .3px
                color #FFF

              p
                position relative
                top 8px
                left 1px
                margin 0
                padding-left 25px
                font-size 14px
                font-weight 500
                letter-spacing .2px
                color #FFF
                opacity .48
                background url('/static/img/locality.svg') no-repeat
                text-align left

          .user-profile-follow-info
            margin-top 30px
            margin-bottom 62px

            .followers
              margin-right 32px
              display inline-block

              .number
                margin 0
                font-size 17px
                font-weight 500
                letter-spacing .3px
                color #FFF

            .following
              display inline-block

              .number
                margin 0
                font-size 17px
                font-weight 500
                letter-spacing .3px
                color #FFF

            .followers p, .following p
              margin 0
              font-size 14px
              margin-top 1px
              font-weight 500
              letter-spacing .3ps
              color rgba(255, 255, 255, 0.42)

            button
              position absolute
              right 0
              top 8px
              margin 0 atuo
              padding 0
              width 112px
              height 33px
              font-size 12px
              letter-spacing .4px
              color #FFF
              text-transform uppercase
              border-radius 10px
              background rgba(138, 127,135, .08)
              transition all .3s ease-in-out
              outline none

              &.isFollowing
                background #f5138e
                box-shadow 0 15px 38px 0 rgba(245, 19, 142, 0.24)
                transition all .3s ease-in-out

          .section-titles
            position relative
            height 60px
            transition all .3s ease-in-out

            .inner
              // display block
              height 34px
              position relative
              padding-top 3px

              .icon
                display inline-block
                background url('/static/img/playlists.svg') no-repeat 2px center
                border-radius 0
                margin-right 4px
                width 34px
                height 34px
                padding 0
                margin-top 0
                margin-left 0

              h2
                position absolute
                text-align left
                display inline-block
                width 62%
                font-size 18px
                font-weight 500
                color #FFF
                margin 0
                margin-top 5px
                margin-left 40px

              .see-all
                position absolute
                width 66px
                height 30px
                right 0
                top 6px
                text-align center
                border-radius 10px
                cursor pointer
                z-index 2

                p
                  font-size 12px
                  text-transform uppercase
                  font-weight 500
                  letter-spacing .4px
                  line-height 2.5
                  margin 0
                  color rgba(255, 255, 255, 0.33)
          .playlists-swiper
            .square-swiper
              padding-bottom 63px

            .swiper-padding-left
              padding-left 16px

            .swiper-container
              position relative
              margin-left auto
              margin-right auto
              overflow hidden
              z-index 1

              .swiper-slide
                width 135px !important

              .slide
                width 135px
                margin-right 22px

                .img-play
                  position relative
                  display block
                  width 100%
                  height 100%

                  img
                    display flex
                    border-radius 12px
                    cursor pointer

                  .blur
                    position absolute
                    bottom 17px
                    right 13px
                    width 79px
                    height 25px
                    border-radius 7px
                    overflow hidden

                  .playlists-song-number
                    position absolute
                    bottom 17px
                    right 13px
                    height 26px
                    padding 0 10.82px
                    border-radius 7px
                    color #fff
                    background rgba(255, 255, 255, 0.11)
                    overflow hidden
                    font-size 12px
                    font-weight 700
                    letter-spacing .4px
                    line-height 2.4
                    text-align center
                    text-transform uppercase
                    box-shadow 0 11px 22px 0 rgba(0, 0, 0, 0.38)
              h2
                margin 17px 0 0 1px
                font-size 15px
                font-weight 700
                line-height 1
                letter-spacing .2px
                color #fff
                overflow hidden
                text-overflow ellipsis
                white-space nowrap
                text-align left
